//引入重定向 
import { Navigate } from "react-router-dom"
//懒加载，suspense防止跳转页面闪屏
import { lazy, Suspense } from "react"


/* 一级路由 */
var Index = lazy(() => import("../views/Index"))
var Login = lazy(() => import("../views/Login"))
var Register = lazy(() => import("../views/Register"))


/* 二级路由 */
var Home = lazy(() => import("../views/Index/Home"))
var Servicecenter = lazy(() => import("../views/Index/Servicecenter"))
var Staffcenter = lazy(() => import("../views/Index/Staffcenter"))
var Custommanage = lazy(() => import("../views/Index/Custommanage"))
var Systemmanage = lazy(() => import("../views/Index/Systemmanage"))


/* 三级路由 */
var Personmanage = lazy(() => import("../views/Index/StaffCenter/Personmanage"))
var Staffmanage = lazy(() => import("../views/Index/StaffCenter/Staffmanage"))
var Custom_index = lazy(() => import("../views/Index/Custommanage/Custom_index"))
var Custom_set = lazy(() => import("../views/Index/Custommanage/Custom_set"))
var Realtime_Data = lazy(() => import("../views/Index/Systemmanage/Realtime_Data"))
var Overview = lazy(() => import("../views/Index/Systemmanage/Overview"))



/* 404路由 */
var NotFound = lazy(() => import("../views/NotFound"))

/* 
    作用: 传入权限标识,判断当前用户是否有访问该权限标识的权限, 权限标识实际对应的是路由 或 按钮
    返回值: true 表示有权限访问, false 表示无权限
*/
export function authComponent(permission) { //children 是需要渲染的组件

    //获取当前用户的权限列表
    var permissions = localStorage.getItem('userinfo') ?
        JSON.parse(localStorage.getItem('userinfo')).role.permissions : [];

    //判断当前用户是否有权限访问该组件
    var res = permission && permissions.includes(permission)

    return res;
}

//封装一个函数式组件, 用该组件包裹需要处理的组件, 确保每个二级路由,三级路由组件外面都包裹一个Suspense, 都有懒加载效果. 
function AuthComponent({ children, permission }) { //children 是需要渲染的组件

    //获取当前用户的权限列表
    var permissions = localStorage.getItem('userinfo') ?
        JSON.parse(localStorage.getItem('userinfo')).role.permissions : [];

    //判断当前用户是否有权限访问该路由对应的组件
    var res = permission && permissions.includes(permission)

    return (
        <Suspense fallback={<div>loading...</div>}>
            {
                //如果res为true,则表示有权限访问,渲染children对应的组件
                //如果res为false,则表示没有权限访问,渲染NotFound组件
                res ?
                    children :
                    <NotFound />
            }
        </Suspense>
    )
}

var routes = [
    {
        path: "/index",
        element: <Index />,
        children: [
            {
                path: "/index/home",
                element: <AuthComponent permission={11} ><Home /></AuthComponent>
            },
            {
                path: "/index/servicecenter",
                element: <AuthComponent permission={12} ><Servicecenter /></AuthComponent>
            },
            {
                path: "/index/staffcenter",
                element: <AuthComponent permission={13} ><Staffcenter /></AuthComponent>,
                children: [
                    {
                        path: "/index/staffcenter/personmanage",
                        element: <AuthComponent permission={131} ><Personmanage /></AuthComponent>

                    },
                    {
                        path: "/index/staffcenter/staffmanage",
                        element: <AuthComponent permission={132} ><Staffmanage /></AuthComponent>

                    },
                    {
                        path: "/index/staffcenter",
                        element: <Navigate to="/index/staffcenter/personmanage" />
                    },
                    {

                        path: '*',
                        element: <NotFound />

                    }
                ]


            },
            {
                path: "/index/custommanage",
                element: <AuthComponent permission={14} ><Custommanage /></AuthComponent>,
                children: [
                    {
                        path: "/index/custommanage/custom_index",
                        element: <AuthComponent permission={13}><Custom_index /></AuthComponent>

                    },
                    {
                        path: "/index/custommanage/custom_set",
                        element: <AuthComponent permission={14}><Custom_set /></AuthComponent>

                    },
                    {
                        path: "/index/custommanage",
                        element: <Navigate to="/index/custommanage/custom_index" />
                    },
                    {
                        path: '*',
                        element: <NotFound />

                    }]
            },
            {
                path: "/index/systemmanage",
                element: <AuthComponent permission={15} ><Systemmanage /></AuthComponent>,
                children: [
                    {

                        path: "/index/systemmanage/realtime_data",
                        element: <AuthComponent permission={131} ><Realtime_Data /></AuthComponent>

                    },
                    {
                        path: "/index/systemmanage/overview",
                        element: <AuthComponent permission={131} ><Overview /></AuthComponent>
                    },
                    {
                        path: "/index/systemmanage",
                        element: <Navigate to="/index/systemmanage/realtime_data" />
                    },
                    {
                        path: "*",
                        element: <NotFound />
                    }

                ]
            },

            {
                path: "/index",
                element: <Navigate to="/index/home" />
            },
            {
                path: "*",
                element: <NotFound />
            }
        ]
    },
    {
        path: "/login",
        element: <Login />
    },
    {
        path: "register",
        element: <Register />
    },
    {
        path: "/",
        element: <Navigate to="/index" />
    },
    {
        path: "*",
        element: <NotFound />
    }
]

export default routes